<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style>
			#con {
				margin: 10px;
				font-size: 28px;
			}
			ul {
				margin-bottom: 10px;
			}
			.txt {
				margin: 5px 10px;
				padding: 5px;
				color: #000;
				word-wrap: break-word;
			}
			* {
				margin: 0;
				padding: 0;
				border-width: 0;
			}
			body {
				text-align: center;
				background-color: black;
			}
			canvas {
				background-color: black;
				position: absolute;
			}
			#contain {
				margin: 0 auto;
				width: 300px;
				height: 300px;
				position: absolute;
				background-color: black;
				border:1px solid #ddd;
			}
		</style>
	</head>
	<body>		
		<div id='contain'></div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/touch.js"></script>
	<script type="text/javascript" src="../script/picture.js"></script>
	<script type="text/javascript">
		var canvas=null;
		var width=0;
		var height=0;
		var contain = document.getElementById("contain");
		//contain.style.webkitTransition = 'all ease 0.05s';
		var count=0;
		var ts=0;
		var px=[];
		var py=[];
		var pp=[];
		var pt=[];
		var dx,dy;
		//alert(contain);
		touch.on('#contain', 'touchstart', function(ev) {
			ev.preventDefault();
			count=0;
			px=[];
			py=[];
			pp=[];
			pt=[];
			//var tt=0;
			//console.log("开始"+count+",当前offx值为:" + ev.x + ", 当前offy值为:" + ev.y  + ","+tt);
		});
		touch.on('#contain', 'touchmove', function(ev) {	
		dx = dx || 0;
		dy = dy || 0;
		
		dx += ev.x;
		dy += ev.y;
		
	//log("当前x值为:" + dx + ", 当前y值为:" + dy +".");
		var offx = dx + ev.x + "px";
		var offy = dy + ev.y + "px";
		
		alert(ev.touches);
		
//		 var touch1 = ev.touches[0];
//		             startX = touch1.pageX;
//		             startY = touch1.pageY;
//		     
		     
			var tm=new Date();	
			if(count==0)
				ts=tm;			
			var tt=tm.getTime()-ts.getTime();
			px.push(ev.x);
			py.push(ev.y);
			pp.push(1);
			pt.push(tt);
			count=count+1;			
			console.log("No"+count+",当前offx值为:" + startX + ", 当前offy值为:" + startY  + ","+tt);
		});
		
		touch.on('#contain', 'touchend', function(ev) {
		//console.log(JSON.stringify(ev));
			var tm=new Date();	
			if(count==0)
				ts=tm;			
			var tt=tm.getTime()-ts.getTime();			
			
			dx += ev.x;
			dy += ev.y;
			
			px.push(dx);
			py.push(dy);
			pp.push(2);
			pt.push(tt);
			count=count+1;			
			console.log("No"+count+",当前offx值为:" + dx + ", 当前offy值为:" + dy  + ","+tt);
			//console.log("结束offx值为:" + ev.x + ", 结束offy值为:" + ev.y  + ","+tt);
			alert(JSON.stringify(px));
		});
		
		apiready = function() {
		
		var winH=api.winWidth;
		var winW=api.winHeight;
		
		
		//contain.width=winW;
		//contain.height=winH-50;		

		};
	</script>
</html>